import React from 'react';
import NavBar from '@/components/navbar';
import { bem } from '@/utils';
import './index.scss'
import GoodsCard from '@/components/goodsCard/goodsCard';
import Price from '@/components/price';
import { useNavigate } from 'react-router-dom';
import ListView from '@/components/list';
import Address from '@/pages/address/address';
import TabBar from '@/components/tabBar';
import Btn from '@/components/button';


export interface ConfirmOrderProps {
    totalAmount?: number;
    totalCount?: number;
}

const defaultProps = {
    totalAmount: 100,
    totalCount: 0
}


const ConfirmOrder: React.FC<ConfirmOrderProps> = (props) => {
    const {
        totalAmount,
        totalCount,
        ...rest
    } = {
        ...defaultProps,
        ...props
    };
    const b = bem('');

    const navigate = useNavigate();
    const submitOrder = () => {
        console.log('提交订单');

        navigate('/cashier');
    }

    return (
        <>
            <div className="seal-confirm">
                <div className='seal-confirm__head'>
                    <NavBar
                        backIcon={true}
                        content={'确认订单'}
                        search={false}
                    />
                </div>

                <div className={b('box')}>
                    <div className='seal-confirm-address' >
                        <ListView >
                            <ListView.Item id={'address-1'}  >
                                <Address />
                            </ListView.Item>
                        </ListView>
                    </div>
                </div>

                <div className='seal-sku-goods' style={{ marginTop: '12px' }}>
                    <GoodsCard title='测试商品'
                        showType=''
                        quantityType='input'
                        quantity={1}
                        price={100}
                    >
                    </GoodsCard>


                </div>

                <div className='seal-settle-bar'>
                    <div className='seal-settle-bar-wrap'>
                        <ListView>
                            <ListView.Item right={1000} >商品金额</ListView.Item>
                            <ListView.Item right={1000} >运费</ListView.Item>
                            <ListView.Item right={1000} >优惠券</ListView.Item>
                            <ListView.Item right={1000} >积分</ListView.Item>
                        </ListView>
                        <div className='seal-settle-bar-total'>
                            合计：<Price price={totalAmount} />
                        </div>
                    </div>
                </div>

                <div className='seal-confirm-footer seal-bottom-fixed'>
                    <div className='seal-confirm__operator'>
                        <TabBar>
                            <TabBar.Item>
                                <div className='seal-confirm__operator-total'>
                                    <Price price={totalAmount} size='xlarge' />
                                </div>
                            </TabBar.Item>

                            <TabBar.Item>
                                <div className='seal-confirm__operator-btn' >
                                    <Btn
                                        btnTitle={'立即购买'}
                                        onClick={() => { submitOrder() }}
                                    />
                                </div>

                            </TabBar.Item>
                        </TabBar>
                    </div>
                </div>

            </div>
        </>
    )
}

export default ConfirmOrder;